

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
  <meta charset="utf-8" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <title>Animations &mdash; LVGL  documentation</title>
  

  
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/fontawesome.min.css" type="text/css" />

  
  
    <link rel="shortcut icon" href="../_static/favicon.png"/>
  

  
  

  
    <link rel="canonical" href="https://docs.lvgl.io/v8.0/en/html/overview/animation.html" />

  
  <!--[if lt IE 9]>
    <script src="../_static/js/html5shiv.min.js"></script>
  <![endif]-->
  
    
      <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
        <script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
        <script src="../_static/jquery.js"></script>
        <script src="../_static/underscore.js"></script>
        <script src="../_static/doctools.js"></script>
    
    <script type="text/javascript" src="../_static/js/theme.js"></script>

    
    <link rel="index" title="Index" href="../genindex.html" />
    <link rel="search" title="Search" href="../search.html" />
    <link rel="next" title="Timers" href="timer.html" />
    <link rel="prev" title="File system" href="file-system.html" />
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78811084-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

	gtag('config', 'UA-78811084-3', { 'anonymize_ip': true });
</script>

</head>

<body class="wy-body-for-nav">

   
  <div class="wy-grid-for-nav">
    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search" >
          

          
            <a href="../index.html">
          

          
            
            <img src="../_static/logo_lvgl.png" class="logo" alt="Logo"/>
          
          </a>

          
            
            
              <div class="version">
                8.0
              </div>
            
          

          
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>

          
        </div>

        
        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
          
            
            
              
            
            
              <ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../intro/index.html">Introduction</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#key-features">Key features</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#requirements">Requirements</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#license">License</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#repository-layout">Repository layout</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#release-policy">Release policy</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#release-cycle">Release cycle</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#branches">Branches</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#changelog">Changelog</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#version-support">Version support</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#faq">FAQ</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#where-can-i-ask-questions">Where can I ask questions?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-mcu-hardware-supported">Is my MCU/hardware supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-display-supported">Is my display supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#nothing-happens-my-display-driver-is-not-called-what-have-i-missed">Nothing happens, my display driver is not called. What have I missed?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-is-the-display-driver-called-only-once-only-the-upper-part-of-the-display-is-refreshed">Why is the display driver called only once? Only the upper part of the display is refreshed.</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-do-i-see-only-garbage-on-the-screen">Why do I see only garbage on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-i-see-nonsense-colors-on-the-screen">Why I see nonsense colors on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-speed-up-my-ui">How to speed up my UI?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-flash-rom-usage">How to reduce flash/ROM usage?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-the-ram-usage">How to reduce the RAM usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-work-with-an-operating-system">How to work with an operating system?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../get-started/index.html">Get started</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../get-started/quick-overview.html">Quick overview</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#get-started-in-a-simulator">Get started in a simulator</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#add-lvgl-into-your-project">Add LVGL into your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#learn-the-basics">Learn the basics</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#widgets">Widgets</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#parts">Parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#states">States</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#themes">Themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#id1">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#micropython">Micropython</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/pc-simulator.html">Simulator on PC</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/pc-simulator.html#select-an-ide">Select an IDE</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/pc-simulator.html#set-up-eclipse-cdt">Set-up Eclipse CDT</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#install-eclipse-cdt">Install Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#install-sdl-2">Install SDL 2</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#pre-configured-project">Pre-configured project</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#add-the-pre-configured-project-to-eclipse-cdt">Add the pre-configured project to Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#compile-and-run">Compile and Run</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/stm32.html">STM32</a></li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/nxp.html">NXP</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nxp.html#creating-new-project-with-lvgl">Creating new project with LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nxp.html#adding-hw-acceleration-for-nxp-imx-rt-platforms-using-pxp-pixel-pipeline-engine-for-existing-projects">Adding HW acceleration for NXP iMX RT platforms using PXP (PiXel Pipeline) engine for existing projects</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#features-supported">Features supported:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#basic-configuration">Basic configuration:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#basic-initialization">Basic initialization:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#project-setup">Project setup:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#advanced-configuration">Advanced configuration:</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/espressif.html">Espressif (ESP32)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#get-the-lvgl-demo-project-for-esp32">Get the LVGL demo project for ESP32</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#use-lvgl-in-your-esp32-project">Use LVGL in your ESP32 project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#prerequisites">Prerequisites</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#get-lvgl">Get LVGL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#use-lvgl-esp32-drivers-in-your-project">Use lvgl_esp32_drivers in your project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#support-for-esp32-s2">Support for ESP32-S2</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/arduino.html">Arduino</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#get-the-lvgl-ardunio-library">Get the LVGL Ardunio library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#set-up-drivers">Set up drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#configure-lvgl">Configure LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#configure-the-examples">Configure the examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#initialize-lvgl-and-run-an-example">Initialize LVGL and run an example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#debugging-and-logging">Debugging and logging</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/micropython.html">Micropython</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#what-is-micropython">What is Micropython?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#highlights-of-micropython">Highlights of Micropython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#why-micropython-lvgl">Why Micropython + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#here-are-some-advantages-of-using-lvgl-in-micropython">Here are some advantages of using LVGL in Micropython:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#micropython-lvgl-could-be-used-for">Micropython + LVGL could be used for:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#so-what-does-it-look-like">So what does it look like?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#a-simple-example">A simple example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#how-can-i-use-it">How can I use it?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#online-simulator">Online Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#pc-simulator">PC Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#embedded-platform">Embedded platform</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/nuttx.html">NuttX RTOS</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#what-is-nuttx">What is NuttX?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#highlights-of-nuttx">Highlights of NuttX</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#why-nuttx-lvgl">Why NuttX + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#here-are-some-advantages-of-using-lvgl-in-nuttx">Here are some advantages of using LVGL in NuttX</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#nuttx-lvgl-could-be-used-for">NuttX + LVGL could be used for</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#how-to-get-started-with-nuttx-and-lvgl">How to get started with NuttX and LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#first-you-need-to-install-the-pre-requisite-on-your-system">First you need to install the pre-requisite on your system</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#now-let-s-to-create-a-workspace-to-save-our-files">Now let's to create a workspace to save our files</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#clone-the-nuttx-and-apps-repositories">Clone the NuttX and Apps repositories:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#configure-nuttx-to-use-the-stm32f429i-disco-board-and-the-lvgl-demo">Configure NuttX to use the stm32f429i-disco board and the LVGL Demo</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#flashing-the-firmware-in-the-board-using-openocd">Flashing the firmware in the board using OpenOCD:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../porting/index.html">Porting</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../porting/project.html">Set-up a project</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#get-the-library">Get the library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#configuration-file">Configuration file</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/display.html">Display interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#draw-buffer">Draw buffer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#display-driver">Display driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#mandatory-fields">Mandatory fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#optional-fields">Optional fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#rotation">Rotation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/indev.html">Input device interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#types-of-input-devices">Types of input devices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#touchpad-mouse-or-any-pointer">Touchpad, mouse or any pointer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#keypad-or-keyboard">Keypad or keyboard</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#encoder">Encoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#button">Button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#parameters">Parameters</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#feedback">Feedback</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#associating-with-a-display">Associating with a display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#buffered-reading">Buffered reading</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/tick.html">Tick interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/tick.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/task-handler.html">Task Handler</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/sleep.html">Sleep management</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/os.html">Operating system and interrupts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#tasks-and-threads">Tasks and threads</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#interrupts">Interrupts</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/log.html">Logging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#log-level">Log level</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#printing-logs">Printing logs</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#logging-with-printf">Logging with printf</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#custom-log-function">Custom log function</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#add-logs">Add logs</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1 current"><a class="reference internal" href="index.html">Overview</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="object.html">Objects</a><ul>
<li class="toctree-l3"><a class="reference internal" href="object.html#attributes">Attributes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#basic-attributes">Basic attributes</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#specific-attributes">Specific attributes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#working-mechanisms">Working mechanisms</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#parent-child-structure">Parent-child structure</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#moving-together">Moving together</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#visibility-only-on-the-parent">Visibility only on the parent</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#create-and-delete-objects">Create and delete objects</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#create-screens">Create screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#get-the-active-screen">Get the active screen</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#load-screens">Load screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#layers">Layers</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#handling-multiple-displays">Handling multiple displays</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="object.html#states">States</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="coords.html">Positions, sizes, and layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="coords.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#units">Units</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#boxing-model">Boxing model</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#important-notes">Important notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#position">Position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#simple-way">Simple way</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#align">Align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#size">Size</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#id1">Simple way</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#using-styles">Using styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#translation">Translation</a></li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#transformation">Transformation</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#min-and-max-size">Min and Max size</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#layout">Layout</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#id2">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#built-in-layout">Built-in layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#adding-new-layouts">Adding new layouts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="style.html">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="style.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#cascading-styles">Cascading styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#inheritance">Inheritance</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#initialize-styles-and-set-get-properties">Initialize styles and set/get properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#add-and-remove-styles-to-a-widget">Add and remove styles to a widget</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#add-styles">Add styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#remove-styles">Remove styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#report-style-changes">Report style changes</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#get-a-property-s-value-on-an-object">Get a property's value on an object</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#properties">Properties</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#typical-background-properties">Typical background properties</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#transitions">Transitions</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#color-filter">Color filter</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#themes">Themes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#extending-themes">Extending themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="style-props.html">Style properties</a><ul>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#size-and-position">Size and position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#width">width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#min-width">min_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#max-width">max_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#height">height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#min-height">min_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#max-height">max_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#x">x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#y">y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#align">align</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-width">transform_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-height">transform_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#translate-x">translate_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#translate-y">translate_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-zoom">transform_zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-angle">transform_angle</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#padding">Padding</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-top">pad_top</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-bottom">pad_bottom</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-left">pad_left</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-right">pad_right</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-row">pad_row</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-column">pad_column</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#miscellaneous">Miscellaneous</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#radius">radius</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#clip-corner">clip_corner</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#opa">opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#color-filter-dsc">color_filter_dsc</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#color-filter-opa">color_filter_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim-time">anim_time</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim-speed">anim_speed</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transition">transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#blend-mode">blend_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#layout">layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#base-dir">base_dir</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#background">Background</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-color">bg_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-opa">bg_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-color">bg_grad_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-dir">bg_grad_dir</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-main-stop">bg_main_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-stop">bg_grad_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-src">bg_img_src</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-opa">bg_img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-recolor">bg_img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-recolor-opa">bg_img_recolor_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-tiled">bg_img_tiled</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#border">Border</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-color">border_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-opa">border_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-width">border_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-side">border_side</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-post">border_post</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#text">Text</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-color">text_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-opa">text_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-font">text_font</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-letter-space">text_letter_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-line-space">text_line_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-decor">text_decor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-align">text_align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-opa">img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-recolor">img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-recolor-opa">img_recolor_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#outline">Outline</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-width">outline_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-color">outline_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-opa">outline_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-pad">outline_pad</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#shadow">Shadow</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-width">shadow_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-ofs-x">shadow_ofs_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-ofs-y">shadow_ofs_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-spread">shadow_spread</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-color">shadow_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-opa">shadow_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-width">line_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-dash-width">line_dash_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-dash-gap">line_dash_gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-rounded">line_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-color">line_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-opa">line_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-width">arc_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-rounded">arc_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-color">arc_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-opa">arc_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-img-src">arc_img_src</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="scroll.html">Scroll</a><ul>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scrollbar">Scrollbar</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#events">Events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#basic-example">Basic example</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#features-of-scrolling">Features of scrolling</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scrollable">Scrollable</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-chain">Scroll chain</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-momentum">Scroll momentum</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#elastic-scroll">Elastic scroll</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#snapping">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-one">Scroll one</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-on-focus">Scroll on focus</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#scroll-manually">Scroll manually</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#self-size">Self size</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#micropython">MicroPython</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="layer.html">Layers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="layer.html#order-of-creation">Order of creation</a></li>
<li class="toctree-l3"><a class="reference internal" href="layer.html#bring-to-the-foreground">Bring to the foreground</a></li>
<li class="toctree-l3"><a class="reference internal" href="layer.html#top-and-sys-layers">Top and sys layers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="event.html">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="event.html#add-events-to-the-object">Add events to the object</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#remove-event-s-from-an-object">Remove event(s) from an object</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#event-codes">Event codes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#input-device-events">Input device events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#drawing-events">Drawing events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#other-events">Other events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#special-events">Special events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#custom-events">Custom events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="event.html#sending-events">Sending events</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#refresh-event">Refresh event</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="event.html#fields-of-lv-event-t">Fields of lv_event_t</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#event-bubbling">Event bubbling</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#micropython">MicroPython</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="indev.html">Input devices</a><ul>
<li class="toctree-l3"><a class="reference internal" href="indev.html#pointers">Pointers</a></li>
<li class="toctree-l3"><a class="reference internal" href="indev.html#keypad-and-encoder">Keypad and encoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#styling">Styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="indev.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#input-device">Input device</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#id1">Groups</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="display.html">Displays</a><ul>
<li class="toctree-l3"><a class="reference internal" href="display.html#multiple-display-support">Multiple display support</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#using-only-one-display">Using only one display</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#mirror-display">Mirror display</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#split-image">Split image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#transparent-screens">Transparent screens</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#features-of-displays">Features of displays</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#inactivity">Inactivity</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#background">Background</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="color.html">Colors</a><ul>
<li class="toctree-l3"><a class="reference internal" href="color.html#creating-colors">Creating colors</a><ul>
<li class="toctree-l4"><a class="reference internal" href="color.html#rgb">RGB</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#hsv">HSV</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#palette">Palette</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#modify-and-mix-colors">Modify and mix colors</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#built-in-colors">Built-in colors</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="color.html#opacity">Opacity</a></li>
<li class="toctree-l3"><a class="reference internal" href="color.html#color-types">Color types</a><ul>
<li class="toctree-l4"><a class="reference internal" href="color.html#convert-color">Convert color</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="color.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="font.html">Fonts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="font.html#unicode-support">Unicode support</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#built-in-fonts">Built-in fonts</a><ul>
<li class="toctree-l4"><a class="reference internal" href="font.html#normal-fonts">Normal fonts</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#special-fonts">Special fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="font.html#special-features">Special features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="font.html#bidirectional-support">Bidirectional support</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#arabic-and-persian-support">Arabic and Persian support</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#subpixel-rendering">Subpixel rendering</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#compress-fonts">Compress fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-new-font">Add new font</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-new-symbols">Add new symbols</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#load-font-at-run-time">Load font at run-time</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-a-new-font-engine">Add a new font engine</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="image.html">Images</a><ul>
<li class="toctree-l3"><a class="reference internal" href="image.html#store-images">Store images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#variables">Variables</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#files">Files</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#color-formats">Color formats</a></li>
<li class="toctree-l3"><a class="reference internal" href="image.html#add-and-use-images">Add and use images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#online-converter">Online converter</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#manually-create-an-image">Manually create an image</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#use-images">Use images</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#image-decoder">Image decoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#custom-image-formats">Custom image formats</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#register-an-image-decoder">Register an image decoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#manually-use-an-image-decoder">Manually use an image decoder</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#image-caching">Image caching</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#cache-size">Cache size</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#value-of-images">Value of images</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#memory-usage">Memory usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#clean-the-cache">Clean the cache</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#image-buffer">Image buffer</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="file-system.html">File system</a><ul>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#ready-to-use-drivers">Ready to use drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#add-a-driver">Add a driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#registering-a-driver">Registering a driver</a></li>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#implementing-the-callbacks">Implementing the callbacks</a></li>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#other-callbacks">Other callbacks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#usage-example">Usage example</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#use-drivers-for-images">Use drivers for images</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#create-an-animation">Create an animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="#animation-path">Animation path</a></li>
<li class="toctree-l3"><a class="reference internal" href="#speed-vs-time">Speed vs time</a></li>
<li class="toctree-l3"><a class="reference internal" href="#delete-animations">Delete animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="timer.html">Timers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="timer.html#create-a-timer">Create a timer</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#ready-and-reset">Ready and Reset</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#set-parameters">Set parameters</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#repeat-count">Repeat count</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#measure-idle-time">Measure idle time</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#asynchronous-calls">Asynchronous calls</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="drawing.html">Drawing</a><ul>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#mechanism-of-screen-refreshing">Mechanism of screen refreshing</a></li>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#masking">Masking</a></li>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#hook-drawing">Hook drawing</a><ul>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#main-drawing">Main drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#post-drawing">Post drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#part-drawing">Part drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#others">Others</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="new_widget.html">New widget</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../widgets/index.html">Widgets</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../widgets/obj.html">Base object (lv_obj)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#coordinates">Coordinates</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#parents-and-children">Parents and children</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#screens">Screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#extended-click-area">Extended click area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#id1">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/core/index.html">Core widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/arc.html">Arc (lv_arc)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/bar.html">Bar (lv_bar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btn.html">Button (lv_btn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btnmatrix.html">Button matrix (lv_btnmatrix)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/canvas.html">Canvas (lv_canvas)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/checkbox.html">Checkbox (lv_checkbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/dropdown.html">Drop-down list (lv_dropdown)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#id1">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/img.html">Image (lv_img)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#transformations">Transformations</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/label.html">Label (lv_label)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/line.html">Line (lv_line)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/roller.html">Roller (lv_roller)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/slider.html">Slider (lv_slider)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/switch.html">Switch (lv_switch)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/table.html">Table (lv_table)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/textarea.html">Text area (lv_textarea)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/extra/index.html">Extra widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/calendar.html">Calendar (lv_calendar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#headers">Headers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/chart.html">Chart (lv_chart)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/colorwheel.html">Color wheel (lv_colorwheel)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/imgbtn.html">Image button (lv_imgbtn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/keyboard.html">Keyboard (lv_keyboard)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#examples">Examples</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/led.html">LED (lv_led)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/list.html">List (lv_list)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/meter.html">Meter (lv_meter)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/msgbox.html">Message box (lv_msgbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/span.html">Span (lv_span)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinbox.html">Spinbox (lv_spinbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#api">API</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#id1">Example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinner.html">Spinner (lv_spinner)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tabview.html">Tabview (lv_tabview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tileview.html">Tile view (lv_tileview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/win.html">Window (lv_win)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#get-the-parts">Get the parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../layouts/index.html">Layouts</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../layouts/flex.html">Flex</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-flow">Flex flow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-align">Flex align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-grow">Flex grow</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#style-interface">Style interface</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#rtl">RTL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#new-track">New track</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../layouts/grid.html">Grid</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-descriptors">Grid descriptors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-items">Grid items</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-align">Grid align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#style-interface">Style interface</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#rtl">RTL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CONTRIBUTING.html">Contributing</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#introduction">Introduction</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#pull-request">Pull request</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-github">From GitHub</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-command-line">From command line</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#developer-certification-of-origin-dco">Developer Certification of Origin (DCO)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#accepted-licenses-and-copyright-notices">Accepted licenses and copyright notices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#your-own-work">Your own work</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-code-from-online-source">Use code from online source</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-mit-licensed-code">Use MIT licensed code</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-gpl-licensed-code">Use GPL licensed code</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#ways-to-contribute">Ways to contribute</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#give-lvgl-a-star">Give LVGL a Star</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#tell-what-you-have-achieved">Tell what you have achieved</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#write-examples">Write examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#improve-the-docs">Improve the docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#report-bugs">Report bugs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#send-fixes">Send fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#join-the-conversations-in-the-forum">Join the conversations in the Forum</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#add-features">Add features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#become-a-maintainer">Become a maintainer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#move-your-project-repository-under-lvgl-organization">Move your project repository under LVGL organization</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CHANGELOG.html">Changelog</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-2-16-07-2021">v8.0.2 (16.07.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-1-14-06-2021">v8.0.1 (14.06.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-0-01-06-2021">v8.0.0 (01.06.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#directory-structure">Directory structure</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#widget-changes">Widget changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-scrolling">New scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-layouts">New layouts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#driver-changes">Driver changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#other-changes">Other changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-release-policy">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#migrating-from-v7-to-v8">Migrating from v7 to v8</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-11-0-16-03-2021">v7.11.0 (16.03.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-features">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#bugfixes">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-10-1-16-02-2021">v7.10.1 (16.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id1">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-10-0-02-02-2021">v7.10.0 (02.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id2">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id3">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-9-1-19-01-2021">v7.9.1 (19.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id4">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-9-0-05-01-2021">v7.9.0 (05.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id5">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id6">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-8-1-15-12-2020">v7.8.1 (15.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id7">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-8-0-01-12-2020">v7.8.0 (01.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id8">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id9">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-2-17-11-2020">v7.7.2 (17.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id10">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-1-03-11-2020">v7.7.1 (03.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id11">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-0-20-10-2020">v7.7.0 (20.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id12">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id13">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-6-1-06-10-2020">v7.6.1 (06.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id14">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-6-0-22-09-2020">v7.6.0 (22.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id15">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id16">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-5-0-15-09-2020">v7.5.0 (15.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id17">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id18">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-4-0-01-09-2020">v7.4.0 (01.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id19">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id20">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-3-1-18-08-2020">v7.3.1 (18.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id21">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-3-0-04-08-2020">v7.3.0 (04.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id22">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id23">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-2-0-21-07-2020">v7.2.0 (21.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id24">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id25">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-1-0-07-07-2020">v7.1.0 (07.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id26">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id27">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-2-16-06-2020">v7.0.2 (16.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id28">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-1-01-06-2020">v7.0.1 (01.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id29">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-0-18-05-2020">v7.0.0 (18.05.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#documentation">Documentation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#legal-changes">Legal changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-drawing-system">New drawing system</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-style-system">New style system</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#gpu-integration">GPU integration</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#renames">Renames</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#reworked-and-improved-object">Reworked and improved object</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-object-types">New object types</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#others">Others</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#demos">Demos</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id30">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#migrating-from-v6-to-v7">Migrating from v6 to v7</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../ROADMAP.html">Roadmap</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8-x">v8.X</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#ideas">Ideas</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8">v8</a></li>
</ul>
</li>
</ul>

            
          
        </div>
        
      </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" aria-label="top navigation">
        
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="../index.html">LVGL</a>
        
      </nav>


      <div class="wy-nav-content">
        
        <div class="rst-content">
        
          



















<div role="navigation" aria-label="breadcrumbs navigation">

  <ul class="wy-breadcrumbs">
    
      <li><a href="../index.html" class="icon icon-home"></a> &raquo;</li>
        
          <li><a href="index.html">Overview</a> &raquo;</li>
        
      <li>Animations</li>
    
    
      <li class="wy-breadcrumbs-aside">
        
          
            
              <!-- User defined GitHub URL -->
              <a href="https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/docs/overview/animation.md" class="fa fa-github"> Edit on GitHub</a>
            
          
        
      </li>
    
  </ul>

  
  <hr/>
</div>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
            
  <div class="section" id="animations">
<h1>Animations<a class="headerlink" href="#animations" title="Permalink to this headline">¶</a></h1>
<p>You can automatically change the value of a variable between a start and an end value using animations.
The animation will happen by periodically calling an &quot;animator&quot; function with the corresponding value parameter.</p>
<p>The <em>animator</em> functions have the following prototype:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="kt">void</span> <span class="nf">func</span><span class="p">(</span><span class="kt">void</span> <span class="o">*</span> <span class="n">var</span><span class="p">,</span> <span class="n">lv_anim_var_t</span> <span class="n">value</span><span class="p">);</span>
</pre></div>
</div>
<p>This prototype is compatible with the majority of the <em>set</em> functions of LVGL. For example <code class="docutils literal notranslate"><span class="pre">lv_obj_set_x(obj,</span> <span class="pre">value)</span></code> or <code class="docutils literal notranslate"><span class="pre">lv_obj_set_width(obj,</span> <span class="pre">value)</span></code></p>
<div class="section" id="create-an-animation">
<h2>Create an animation<a class="headerlink" href="#create-an-animation" title="Permalink to this headline">¶</a></h2>
<p>To create an animation an <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable has to be initialized and configured with <code class="docutils literal notranslate"><span class="pre">lv_anim_set_...()</span></code> functions.</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span>
<span class="cm">/* INITIALIZE AN ANIMATION</span>
<span class="cm"> *-----------------------*/</span>

<span class="n">lv_anim_t</span> <span class="n">a</span><span class="p">;</span>
<span class="n">lv_anim_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>

<span class="cm">/* MANDATORY SETTINGS</span>
<span class="cm"> *------------------*/</span>

<span class="cm">/*Set the &quot;animator&quot; function*/</span>
<span class="n">lv_anim_set_exec_cb</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="p">(</span><span class="n">lv_anim_exec_xcb_t</span><span class="p">)</span> <span class="n">lv_obj_set_x</span><span class="p">);</span> 

<span class="cm">/*Set the &quot;animator&quot; function*/</span>
<span class="n">lv_anim_set_var</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">obj</span><span class="p">);</span> 

<span class="cm">/*Length of the animation [ms]*/</span>
<span class="n">lv_anim_set_time</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">duration</span><span class="p">);</span>

<span class="cm">/*Set start and end values. E.g. 0, 150*/</span>
<span class="n">lv_anim_set_values</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">start</span><span class="p">,</span> <span class="n">end</span><span class="p">);</span>

<span class="cm">/* OPTIONAL SETTINGS</span>
<span class="cm"> *------------------*/</span>

<span class="cm">/*Time to wait before starting the animation [ms]*/</span>
<span class="n">lv_anim_set_delay</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">delay</span><span class="p">);</span>

<span class="cm">/*Set path (curve). Default is linear*/</span>
<span class="n">lv_anim_set_path</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">lv_anim_path_ease_in</span><span class="p">);</span>

<span class="cm">/*Set a callback to call when animation is ready.*/</span>
<span class="n">lv_anim_set_ready_cb</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">ready_cb</span><span class="p">);</span>

<span class="cm">/*Set a callback to call when animation is started (after delay).*/</span>
<span class="n">lv_anim_set_start_cb</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">start_cb</span><span class="p">);</span>

<span class="cm">/*Play the animation backward too with this duration. Default is 0 (disabled) [ms]*/</span>
<span class="n">lv_anim_set_playback_time</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">wait_time</span><span class="p">);</span> 

<span class="cm">/*Delay before playback. Default is 0 (disabled) [ms]*/</span>
<span class="n">lv_anim_set_playback_delay</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">wait_time</span><span class="p">);</span>

<span class="cm">/*Number of repetitions. Default is 1.  LV_ANIM_REPEAT_INFINIT for infinite repetition*/</span>
<span class="n">lv_anim_set_repeat_count</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">wait_time</span><span class="p">);</span>

<span class="cm">/*Delay before repeat. Default is 0 (disabled) [ms]*/</span>
<span class="n">lv_anim_set_repeat_delay</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">wait_time</span><span class="p">);</span>

<span class="cm">/*true (default): apply the start vale immediately, false: apply start vale after delay when then anim. really starts. */</span>
<span class="n">lv_anim_set_early_apply</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="nb">true</span><span class="o">/</span><span class="nb">false</span><span class="p">);</span>

<span class="cm">/* START THE ANIMATION</span>
<span class="cm"> *------------------*/</span>
<span class="n">lv_anim_start</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>                             <span class="cm">/*Start the animation*/</span>
</pre></div>
</div>
<p>You can apply multiple different animations on the same variable at the same time.
For example, animate the x and y coordinates with <code class="docutils literal notranslate"><span class="pre">lv_obj_set_x</span></code> and <code class="docutils literal notranslate"><span class="pre">lv_obj_set_y</span></code>. However, only one animation can exist with a given variable and function pair.
Therefore <code class="docutils literal notranslate"><span class="pre">lv_anim_start()</span></code> will delete the already existing variable-function animations.</p>
</div>
<div class="section" id="animation-path">
<h2>Animation path<a class="headerlink" href="#animation-path" title="Permalink to this headline">¶</a></h2>
<p>You can determinate the path of animation. The most simple case is linear, meaning the current value between <em>start</em> and <em>end</em> is changed with fixed steps.
A <em>path</em> is a function which calculates the next value to set based on the current state of the animation. Currently, there are the following built-in paths functions:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">lv_anim_path_linear</span></code> linear animation</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">lv_anim_path_step</span></code> change in one step at the end</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">lv_anim_path_ease_in</span></code> slow at the beginning</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">lv_anim_path_ease_out</span></code> slow at the end</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">lv_anim_path_ease_in_out</span></code> slow at the beginning and at the end</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">lv_anim_path_overshoot</span></code> overshoot the end value</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">lv_anim_path_bounce</span></code> bounce back a little from the end value (like hitting a wall)</p></li>
</ul>
</div>
<div class="section" id="speed-vs-time">
<h2>Speed vs time<a class="headerlink" href="#speed-vs-time" title="Permalink to this headline">¶</a></h2>
<p>By default, you set the animation time. But in some cases, setting the animation speed is more practical.</p>
<p>The <code class="docutils literal notranslate"><span class="pre">lv_anim_speed_to_time(speed,</span> <span class="pre">start,</span> <span class="pre">end)</span></code> function calculates the required time in milliseconds to reach the end value from a start value with the given speed.
The speed is interpreted in <em>unit/sec</em> dimension. For example,  <code class="docutils literal notranslate"><span class="pre">lv_anim_speed_to_time(20,0,100)</span></code> will yield 5000 milliseconds. For example, in case of <code class="docutils literal notranslate"><span class="pre">lv_obj_set_x</span></code> <em>unit</em> is pixels so <em>20</em> means <em>20 px/sec</em> speed.</p>
</div>
<div class="section" id="delete-animations">
<h2>Delete animations<a class="headerlink" href="#delete-animations" title="Permalink to this headline">¶</a></h2>
<p>You can delete an animation with <code class="docutils literal notranslate"><span class="pre">lv_anim_del(var,</span> <span class="pre">func)</span></code> if you provide the animated variable and its animator function.</p>
</div>
<div class="section" id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this headline">¶</a></h2>
<div class="section" id="c">
<h3>C<a class="headerlink" href="#c" title="Permalink to this headline">¶</a></h3>
<div class="section" id="start-animation-on-an-event">
<h4>Start animation on an event<a class="headerlink" href="#start-animation-on-an-event" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_anim_1&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/anim/lv_example_anim_1.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_BUILD_EXAMPLES &amp;&amp; LV_USE_SWITCH</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">anim_x_cb</span><span class="p">(</span><span class="kt">void</span> <span class="o">*</span> <span class="n">var</span><span class="p">,</span> <span class="kt">int32_t</span> <span class="n">v</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_set_x</span><span class="p">(</span><span class="n">var</span><span class="p">,</span> <span class="n">v</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">sw_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">sw</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_event_get_user_data</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>

    <span class="k">if</span><span class="p">(</span><span class="n">lv_obj_has_state</span><span class="p">(</span><span class="n">sw</span><span class="p">,</span> <span class="n">LV_STATE_CHECKED</span><span class="p">))</span> <span class="p">{</span>
        <span class="n">lv_anim_t</span> <span class="n">a</span><span class="p">;</span>
        <span class="n">lv_anim_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>
        <span class="n">lv_anim_set_var</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">label</span><span class="p">);</span>
        <span class="n">lv_anim_set_values</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">lv_obj_get_x</span><span class="p">(</span><span class="n">label</span><span class="p">),</span> <span class="mi">100</span><span class="p">);</span>
        <span class="n">lv_anim_set_time</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="mi">500</span><span class="p">);</span>
        <span class="n">lv_anim_set_exec_cb</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">anim_x_cb</span><span class="p">);</span>
        <span class="n">lv_anim_set_path_cb</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">lv_anim_path_overshoot</span><span class="p">);</span>
        <span class="n">lv_anim_start</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="n">lv_anim_t</span> <span class="n">a</span><span class="p">;</span>
        <span class="n">lv_anim_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>
        <span class="n">lv_anim_set_var</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">label</span><span class="p">);</span>
        <span class="n">lv_anim_set_values</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">lv_obj_get_x</span><span class="p">(</span><span class="n">label</span><span class="p">),</span> <span class="o">-</span><span class="n">lv_obj_get_width</span><span class="p">(</span><span class="n">label</span><span class="p">));</span>
        <span class="n">lv_anim_set_time</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="mi">500</span><span class="p">);</span>
        <span class="n">lv_anim_set_exec_cb</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">anim_x_cb</span><span class="p">);</span>
        <span class="n">lv_anim_set_path_cb</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">lv_anim_path_ease_in</span><span class="p">);</span>
        <span class="n">lv_anim_start</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>
    <span class="p">}</span>

<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Start animation on an event</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_anim_1</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Hello animations!&quot;</span><span class="p">);</span>
    <span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>


    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">sw</span> <span class="o">=</span> <span class="n">lv_switch_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">sw</span><span class="p">);</span>
    <span class="n">lv_obj_add_state</span><span class="p">(</span><span class="n">sw</span><span class="p">,</span> <span class="n">LV_STATE_CHECKED</span><span class="p">);</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">sw</span><span class="p">,</span> <span class="n">sw_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_VALUE_CHANGED</span><span class="p">,</span> <span class="n">label</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="playback-animation">
<h4>Playback animation<a class="headerlink" href="#playback-animation" title="Permalink to this headline">¶</a></h4>
<iframe class='lv-example' src='/8.0/_static/built_lv_examples/index.html?example=lv_example_anim_2&w=320&h=240'></iframe><div class="toggle docutils container">
<div class="header docutils container">
<p>code &nbsp; <a class='fa fa-github' href='https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/examples/anim/lv_example_anim_2.c'>&nbsp; view on GitHub</a></p></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_BUILD_EXAMPLES &amp;&amp; LV_USE_SWITCH</span>


<span class="k">static</span> <span class="kt">void</span> <span class="nf">anim_x_cb</span><span class="p">(</span><span class="kt">void</span> <span class="o">*</span> <span class="n">var</span><span class="p">,</span> <span class="kt">int32_t</span> <span class="n">v</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_set_x</span><span class="p">(</span><span class="n">var</span><span class="p">,</span> <span class="n">v</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">anim_size_cb</span><span class="p">(</span><span class="kt">void</span> <span class="o">*</span> <span class="n">var</span><span class="p">,</span> <span class="kt">int32_t</span> <span class="n">v</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">var</span><span class="p">,</span> <span class="n">v</span><span class="p">,</span> <span class="n">v</span><span class="p">);</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Create a playback animation</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_anim_2</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>

    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span> <span class="o">=</span> <span class="n">lv_obj_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_style_bg_color</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">),</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_set_style_radius</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">LV_RADIUS_CIRCLE</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>

    <span class="n">lv_obj_align</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">LV_ALIGN_LEFT_MID</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>

    <span class="n">lv_anim_t</span> <span class="n">a</span><span class="p">;</span>
    <span class="n">lv_anim_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>
    <span class="n">lv_anim_set_var</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">obj</span><span class="p">);</span>
    <span class="n">lv_anim_set_values</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>
    <span class="n">lv_anim_set_time</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span>
    <span class="n">lv_anim_set_playback_delay</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
    <span class="n">lv_anim_set_playback_time</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="mi">300</span><span class="p">);</span>
    <span class="n">lv_anim_set_repeat_delay</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="mi">500</span><span class="p">);</span>
    <span class="n">lv_anim_set_repeat_count</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">LV_ANIM_REPEAT_INFINITE</span><span class="p">);</span>
    <span class="n">lv_anim_set_path_cb</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">lv_anim_path_ease_in_out</span><span class="p">);</span>

    <span class="n">lv_anim_set_exec_cb</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">anim_size_cb</span><span class="p">);</span>
    <span class="n">lv_anim_start</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>
    <span class="n">lv_anim_set_exec_cb</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">anim_x_cb</span><span class="p">);</span>
    <span class="n">lv_anim_set_values</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">240</span><span class="p">);</span>
    <span class="n">lv_anim_start</span><span class="p">(</span><span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
</div>
</div>
<div class="section" id="micropython">
<h3>MicroPython<a class="headerlink" href="#micropython" title="Permalink to this headline">¶</a></h3>
<p>No examples yet.</p>
</div>
</div>
<div class="section" id="api">
<h2>API<a class="headerlink" href="#api" title="Permalink to this headline">¶</a></h2>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-typedefs">Typedefs</p>
<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv417lv_anim_path_cb_t">
<span id="_CPPv317lv_anim_path_cb_t"></span><span id="_CPPv217lv_anim_path_cb_t"></span><span id="lv_anim_path_cb_t"></span><span class="target" id="lv__anim_8h_1a32c487fbcd8daa37b095ddc4a34630ac"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="p"><span class="pre">(</span></span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_path_cb_t</span></span></span><span class="p"><span class="pre">)</span></span><span class="p"><span class="pre">(</span></span><span class="k"><span class="pre">const</span></span><span class="w"> </span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv410_lv_anim_t" title="_lv_anim_t"><span class="n"><span class="pre">_lv_anim_t</span></span></a><span class="p"><span class="pre">*</span></span><span class="p"><span class="pre">)</span></span><a class="headerlink" href="#_CPPv417lv_anim_path_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the current value during an animation </p>
</dd></dl>

<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv418lv_anim_exec_xcb_t">
<span id="_CPPv318lv_anim_exec_xcb_t"></span><span id="_CPPv218lv_anim_exec_xcb_t"></span><span id="lv_anim_exec_xcb_t"></span><span class="target" id="lv__anim_8h_1a659b620cc7dd6a848a713b48af9a70aa"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="p"><span class="pre">(</span></span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_exec_xcb_t</span></span></span><span class="p"><span class="pre">)</span></span><span class="p"><span class="pre">(</span></span><span class="kt"><span class="pre">void</span></span><span class="p"><span class="pre">*</span></span><span class="p"><span class="pre">,</span></span><span class="w"> </span><span class="n"><span class="pre">int32_t</span></span><span class="p"><span class="pre">)</span></span><a class="headerlink" href="#_CPPv418lv_anim_exec_xcb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Generic prototype of &quot;animator&quot; functions. First parameter is the variable to animate. Second parameter is the value to set. Compatible with <code class="docutils literal notranslate"><span class="pre">lv_xxx_set_yyy(obj,</span> <span class="pre">value)</span></code> functions The <code class="docutils literal notranslate"><span class="pre">x</span></code> in <code class="docutils literal notranslate"><span class="pre">_xcb_t</span></code> means its not a fully generic prototype because it doesn't receive <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span> <span class="pre">*</span></code> as its first argument </p>
</dd></dl>

<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv424lv_anim_custom_exec_cb_t">
<span id="_CPPv324lv_anim_custom_exec_cb_t"></span><span id="_CPPv224lv_anim_custom_exec_cb_t"></span><span id="lv_anim_custom_exec_cb_t"></span><span class="target" id="lv__anim_8h_1a28ac56d6c3508a2d808501907531daec"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="p"><span class="pre">(</span></span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_custom_exec_cb_t</span></span></span><span class="p"><span class="pre">)</span></span><span class="p"><span class="pre">(</span></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv410_lv_anim_t" title="_lv_anim_t"><span class="n"><span class="pre">_lv_anim_t</span></span></a><span class="p"><span class="pre">*</span></span><span class="p"><span class="pre">,</span></span><span class="w"> </span><span class="n"><span class="pre">int32_t</span></span><span class="p"><span class="pre">)</span></span><a class="headerlink" href="#_CPPv424lv_anim_custom_exec_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Same as <code class="docutils literal notranslate"><span class="pre">lv_anim_exec_xcb_t</span></code> but receives <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span> <span class="pre">*</span></code> as the first parameter. It's more consistent but less convenient. Might be used by binding generator functions. </p>
</dd></dl>

<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv418lv_anim_ready_cb_t">
<span id="_CPPv318lv_anim_ready_cb_t"></span><span id="_CPPv218lv_anim_ready_cb_t"></span><span id="lv_anim_ready_cb_t"></span><span class="target" id="lv__anim_8h_1aaa01402e3123828f29f0f6f19a590d8e"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="p"><span class="pre">(</span></span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_ready_cb_t</span></span></span><span class="p"><span class="pre">)</span></span><span class="p"><span class="pre">(</span></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv410_lv_anim_t" title="_lv_anim_t"><span class="n"><span class="pre">_lv_anim_t</span></span></a><span class="p"><span class="pre">*</span></span><span class="p"><span class="pre">)</span></span><a class="headerlink" href="#_CPPv418lv_anim_ready_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Callback to call when the animation is ready </p>
</dd></dl>

<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv418lv_anim_start_cb_t">
<span id="_CPPv318lv_anim_start_cb_t"></span><span id="_CPPv218lv_anim_start_cb_t"></span><span id="lv_anim_start_cb_t"></span><span class="target" id="lv__anim_8h_1ac7164c150f9caaf978cbc97e5a3fe8d3"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="p"><span class="pre">(</span></span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_start_cb_t</span></span></span><span class="p"><span class="pre">)</span></span><span class="p"><span class="pre">(</span></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv410_lv_anim_t" title="_lv_anim_t"><span class="n"><span class="pre">_lv_anim_t</span></span></a><span class="p"><span class="pre">*</span></span><span class="p"><span class="pre">)</span></span><a class="headerlink" href="#_CPPv418lv_anim_start_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Callback to call when the animation really stars (considering <code class="docutils literal notranslate"><span class="pre">delay</span></code>) </p>
</dd></dl>

<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv422lv_anim_get_value_cb_t">
<span id="_CPPv322lv_anim_get_value_cb_t"></span><span id="_CPPv222lv_anim_get_value_cb_t"></span><span id="lv_anim_get_value_cb_t"></span><span class="target" id="lv__anim_8h_1aaeec2eb1031f23a26e426036394fc99b"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="p"><span class="pre">(</span></span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_get_value_cb_t</span></span></span><span class="p"><span class="pre">)</span></span><span class="p"><span class="pre">(</span></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv410_lv_anim_t" title="_lv_anim_t"><span class="n"><span class="pre">_lv_anim_t</span></span></a><span class="p"><span class="pre">*</span></span><span class="p"><span class="pre">)</span></span><a class="headerlink" href="#_CPPv422lv_anim_get_value_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Callback used when the animation values are relative to get the current value </p>
</dd></dl>

<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv49lv_anim_t">
<span id="_CPPv39lv_anim_t"></span><span id="_CPPv29lv_anim_t"></span><span id="lv_anim_t"></span><span class="target" id="lv__anim_8h_1a94df93c022dc57ee917b4757e50ebe22"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv410_lv_anim_t" title="_lv_anim_t"><span class="n"><span class="pre">_lv_anim_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_t</span></span></span><a class="headerlink" href="#_CPPv49lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Describes an animation </p>
</dd></dl>

</div>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-enums">Enums</p>
<dl class="cpp enum">
<dt class="sig sig-object cpp" id="_CPPv416lv_anim_enable_t">
<span id="_CPPv316lv_anim_enable_t"></span><span id="_CPPv216lv_anim_enable_t"></span><span class="target" id="lv__anim_8h_1a1ba9d18fd18b8c83da1f058155b43a71"></span><span class="k"><span class="pre">enum</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_enable_t</span></span></span><a class="headerlink" href="#_CPPv416lv_anim_enable_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Can be used to indicate if animations are enabled or disabled in a case </p>
<p><em>Values:</em></p>
<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4N16lv_anim_enable_t11LV_ANIM_OFFE">
<span id="_CPPv3N16lv_anim_enable_t11LV_ANIM_OFFE"></span><span id="_CPPv2N16lv_anim_enable_t11LV_ANIM_OFFE"></span><span class="target" id="lv__anim_8h_1a1ba9d18fd18b8c83da1f058155b43a71a64690995c13aa084264daf0244796d42"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_ANIM_OFF</span></span></span><a class="headerlink" href="#_CPPv4N16lv_anim_enable_t11LV_ANIM_OFFE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4N16lv_anim_enable_t10LV_ANIM_ONE">
<span id="_CPPv3N16lv_anim_enable_t10LV_ANIM_ONE"></span><span id="_CPPv2N16lv_anim_enable_t10LV_ANIM_ONE"></span><span class="target" id="lv__anim_8h_1a1ba9d18fd18b8c83da1f058155b43a71ae078e0865cfff1b8c196d4c526eb5a5e"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_ANIM_ON</span></span></span><a class="headerlink" href="#_CPPv4N16lv_anim_enable_t10LV_ANIM_ONE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</dd></dl>

</div>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-functions">Functions</p>
<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419LV_EXPORT_CONST_INT23LV_ANIM_REPEAT_INFINITE">
<span id="_CPPv319LV_EXPORT_CONST_INT23LV_ANIM_REPEAT_INFINITE"></span><span id="_CPPv219LV_EXPORT_CONST_INT23LV_ANIM_REPEAT_INFINITE"></span><span id="LV_EXPORT_CONST_INT__LV_ANIM_REPEAT_INFINITE"></span><span class="target" id="lv__anim_8h_1a9fe0ffe8dbd2122f7f347149ffef55ce"></span><span class="sig-name descname"><span class="n"><span class="pre">LV_EXPORT_CONST_INT</span></span></span><span class="sig-paren">(</span><span class="n"><span class="pre">LV_ANIM_REPEAT_INFINITE</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419LV_EXPORT_CONST_INT23LV_ANIM_REPEAT_INFINITE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv418_lv_anim_core_initv">
<span id="_CPPv318_lv_anim_core_initv"></span><span id="_CPPv218_lv_anim_core_initv"></span><span id="_lv_anim_core_init__void"></span><span class="target" id="lv__anim_8h_1ae8276fe9608fab75e9bdc989c837d7d3"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">_lv_anim_core_init</span></span></span><span class="sig-paren">(</span><span class="kt"><span class="pre">void</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv418_lv_anim_core_initv" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Init. the animation module </p>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv412lv_anim_initP9lv_anim_t">
<span id="_CPPv312lv_anim_initP9lv_anim_t"></span><span id="_CPPv212lv_anim_initP9lv_anim_t"></span><span id="lv_anim_init__lv_anim_tP"></span><span class="target" id="lv__anim_8h_1ab47f0c3139bbd759c1ccae268fc297e6"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_init</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv412lv_anim_initP9lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Initialize an animation variable. E.g.: lv_anim_t a; lv_anim_init(&amp;a); lv_anim_set_...(&amp;a); lv_anim_start(&amp;a); </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>a</strong> -- pointer to an <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable to initialize </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv415lv_anim_set_varP9lv_anim_tPv">
<span id="_CPPv315lv_anim_set_varP9lv_anim_tPv"></span><span id="_CPPv215lv_anim_set_varP9lv_anim_tPv"></span><span id="lv_anim_set_var__lv_anim_tP.voidP"></span><span class="target" id="lv__anim_8h_1acc83bd01c04ffa726956bd89ac32e39b"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_var</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">var</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv415lv_anim_set_varP9lv_anim_tPv" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set a variable to animate </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>var</strong> -- pointer to a variable to animate </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419lv_anim_set_exec_cbP9lv_anim_t18lv_anim_exec_xcb_t">
<span id="_CPPv319lv_anim_set_exec_cbP9lv_anim_t18lv_anim_exec_xcb_t"></span><span id="_CPPv219lv_anim_set_exec_cbP9lv_anim_t18lv_anim_exec_xcb_t"></span><span id="lv_anim_set_exec_cb__lv_anim_tP.lv_anim_exec_xcb_t"></span><span class="target" id="lv__anim_8h_1adc1c116cfcc359b4d72cc25b8e8a2ca6"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_exec_cb</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <a class="reference internal" href="#_CPPv418lv_anim_exec_xcb_t" title="lv_anim_exec_xcb_t"><span class="n"><span class="pre">lv_anim_exec_xcb_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">exec_cb</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419lv_anim_set_exec_cbP9lv_anim_t18lv_anim_exec_xcb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set a function to animate <code class="docutils literal notranslate"><span class="pre">var</span></code> </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>exec_cb</strong> -- a function to execute during animation LVGL's built-in functions can be used. E.g. lv_obj_set_x </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv416lv_anim_set_timeP9lv_anim_t8uint32_t">
<span id="_CPPv316lv_anim_set_timeP9lv_anim_t8uint32_t"></span><span id="_CPPv216lv_anim_set_timeP9lv_anim_t8uint32_t"></span><span id="lv_anim_set_time__lv_anim_tP.uint32_t"></span><span class="target" id="lv__anim_8h_1a64e735e13f8bd43ce2532a73b0310d16"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_time</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">duration</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv416lv_anim_set_timeP9lv_anim_t8uint32_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the duration of an animation </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>duration</strong> -- duration of the animation in milliseconds </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv417lv_anim_set_delayP9lv_anim_t8uint32_t">
<span id="_CPPv317lv_anim_set_delayP9lv_anim_t8uint32_t"></span><span id="_CPPv217lv_anim_set_delayP9lv_anim_t8uint32_t"></span><span id="lv_anim_set_delay__lv_anim_tP.uint32_t"></span><span class="target" id="lv__anim_8h_1a9a1fe4ddfb65adbe56445040b53ace7d"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_delay</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">delay</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv417lv_anim_set_delayP9lv_anim_t8uint32_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set a delay before starting the animation </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>delay</strong> -- delay before the animation in milliseconds </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv418lv_anim_set_valuesP9lv_anim_t7int32_t7int32_t">
<span id="_CPPv318lv_anim_set_valuesP9lv_anim_t7int32_t7int32_t"></span><span id="_CPPv218lv_anim_set_valuesP9lv_anim_t7int32_t7int32_t"></span><span id="lv_anim_set_values__lv_anim_tP.int32_t.int32_t"></span><span class="target" id="lv__anim_8h_1a5c77699e636420ac69e738b54884d8d4"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_values</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">start</span></span>, <span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">end</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv418lv_anim_set_valuesP9lv_anim_t7int32_t7int32_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the start and end values of an animation </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>start</strong> -- the start value </p></li>
<li><p><strong>end</strong> -- the end value </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv426lv_anim_set_custom_exec_cbP9lv_anim_t24lv_anim_custom_exec_cb_t">
<span id="_CPPv326lv_anim_set_custom_exec_cbP9lv_anim_t24lv_anim_custom_exec_cb_t"></span><span id="_CPPv226lv_anim_set_custom_exec_cbP9lv_anim_t24lv_anim_custom_exec_cb_t"></span><span id="lv_anim_set_custom_exec_cb__lv_anim_tP.lv_anim_custom_exec_cb_t"></span><span class="target" id="lv__anim_8h_1a09c98e441b31acb85028937aa23cdc64"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_custom_exec_cb</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <a class="reference internal" href="#_CPPv424lv_anim_custom_exec_cb_t" title="lv_anim_custom_exec_cb_t"><span class="n"><span class="pre">lv_anim_custom_exec_cb_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">exec_cb</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv426lv_anim_set_custom_exec_cbP9lv_anim_t24lv_anim_custom_exec_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Similar to <code class="docutils literal notranslate"><span class="pre">lv_anim_set_exec_cb</span></code> but <code class="docutils literal notranslate"><span class="pre">lv_anim_custom_exec_cb_t</span></code> receives <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span> <span class="pre">*</span></code> as its first parameter instead of <code class="docutils literal notranslate"><span class="pre">void</span> <span class="pre">*</span></code>. This function might be used when LVGL is binded to other languages because it's more consistent to have <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span> <span class="pre">*</span></code> as first parameter. The variable to animate can be stored in the animation's <code class="docutils literal notranslate"><span class="pre">user_sata</span></code> </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>exec_cb</strong> -- a function to execute. </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419lv_anim_set_path_cbP9lv_anim_t17lv_anim_path_cb_t">
<span id="_CPPv319lv_anim_set_path_cbP9lv_anim_t17lv_anim_path_cb_t"></span><span id="_CPPv219lv_anim_set_path_cbP9lv_anim_t17lv_anim_path_cb_t"></span><span id="lv_anim_set_path_cb__lv_anim_tP.lv_anim_path_cb_t"></span><span class="target" id="lv__anim_8h_1a12da0141e8a3c4bdcf58e3756b358ad8"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_path_cb</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <a class="reference internal" href="#_CPPv417lv_anim_path_cb_t" title="lv_anim_path_cb_t"><span class="n"><span class="pre">lv_anim_path_cb_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">path_cb</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419lv_anim_set_path_cbP9lv_anim_t17lv_anim_path_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the path (curve) of the animation. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>path_cb</strong> -- a function the get the current value of the animation. </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv420lv_anim_set_start_cbP9lv_anim_t18lv_anim_ready_cb_t">
<span id="_CPPv320lv_anim_set_start_cbP9lv_anim_t18lv_anim_ready_cb_t"></span><span id="_CPPv220lv_anim_set_start_cbP9lv_anim_t18lv_anim_ready_cb_t"></span><span id="lv_anim_set_start_cb__lv_anim_tP.lv_anim_ready_cb_t"></span><span class="target" id="lv__anim_8h_1a2516d0e4041dacc38667d89a3b180837"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_start_cb</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <a class="reference internal" href="#_CPPv418lv_anim_ready_cb_t" title="lv_anim_ready_cb_t"><span class="n"><span class="pre">lv_anim_ready_cb_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">start_cb</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv420lv_anim_set_start_cbP9lv_anim_t18lv_anim_ready_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set a function call when the animation really starts (considering <code class="docutils literal notranslate"><span class="pre">delay</span></code>) </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>start_cb</strong> -- a function call when the animation starts </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_anim_set_get_value_cbP9lv_anim_t22lv_anim_get_value_cb_t">
<span id="_CPPv324lv_anim_set_get_value_cbP9lv_anim_t22lv_anim_get_value_cb_t"></span><span id="_CPPv224lv_anim_set_get_value_cbP9lv_anim_t22lv_anim_get_value_cb_t"></span><span id="lv_anim_set_get_value_cb__lv_anim_tP.lv_anim_get_value_cb_t"></span><span class="target" id="lv__anim_8h_1aacc0e5a9f17efd3e256ac1be2d98aa6f"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_get_value_cb</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <a class="reference internal" href="#_CPPv422lv_anim_get_value_cb_t" title="lv_anim_get_value_cb_t"><span class="n"><span class="pre">lv_anim_get_value_cb_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">get_value_cb</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_anim_set_get_value_cbP9lv_anim_t22lv_anim_get_value_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set a function to use the current value of the variable and make start and end value relative the the returned current value. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>get_value_cb</strong> -- a function call when the animation starts </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv420lv_anim_set_ready_cbP9lv_anim_t18lv_anim_ready_cb_t">
<span id="_CPPv320lv_anim_set_ready_cbP9lv_anim_t18lv_anim_ready_cb_t"></span><span id="_CPPv220lv_anim_set_ready_cbP9lv_anim_t18lv_anim_ready_cb_t"></span><span id="lv_anim_set_ready_cb__lv_anim_tP.lv_anim_ready_cb_t"></span><span class="target" id="lv__anim_8h_1a9e667cfa1cb20fc9c4745f0395d7d382"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_ready_cb</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <a class="reference internal" href="#_CPPv418lv_anim_ready_cb_t" title="lv_anim_ready_cb_t"><span class="n"><span class="pre">lv_anim_ready_cb_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">ready_cb</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv420lv_anim_set_ready_cbP9lv_anim_t18lv_anim_ready_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set a function call when the animation is ready </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>ready_cb</strong> -- a function call when the animation is ready </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv425lv_anim_set_playback_timeP9lv_anim_t8uint32_t">
<span id="_CPPv325lv_anim_set_playback_timeP9lv_anim_t8uint32_t"></span><span id="_CPPv225lv_anim_set_playback_timeP9lv_anim_t8uint32_t"></span><span id="lv_anim_set_playback_time__lv_anim_tP.uint32_t"></span><span class="target" id="lv__anim_8h_1ac4661655a33788509250ef8e2ae8de1e"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_playback_time</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">time</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv425lv_anim_set_playback_timeP9lv_anim_t8uint32_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Make the animation to play back to when the forward direction is ready </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>time</strong> -- the duration of the playback animation in in milliseconds. 0: disable playback </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv426lv_anim_set_playback_delayP9lv_anim_t8uint32_t">
<span id="_CPPv326lv_anim_set_playback_delayP9lv_anim_t8uint32_t"></span><span id="_CPPv226lv_anim_set_playback_delayP9lv_anim_t8uint32_t"></span><span id="lv_anim_set_playback_delay__lv_anim_tP.uint32_t"></span><span class="target" id="lv__anim_8h_1a4586910fbd6598cf80f6cb2e4ab1338f"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_playback_delay</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">delay</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv426lv_anim_set_playback_delayP9lv_anim_t8uint32_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Make the animation to play back to when the forward direction is ready </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>delay</strong> -- delay in milliseconds before starting the playback animation. </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_anim_set_repeat_countP9lv_anim_t8uint16_t">
<span id="_CPPv324lv_anim_set_repeat_countP9lv_anim_t8uint16_t"></span><span id="_CPPv224lv_anim_set_repeat_countP9lv_anim_t8uint16_t"></span><span id="lv_anim_set_repeat_count__lv_anim_tP.uint16_t"></span><span class="target" id="lv__anim_8h_1a0ce024650171b1b5519a5e0e6cad344b"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_repeat_count</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">cnt</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_anim_set_repeat_countP9lv_anim_t8uint16_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Make the animation repeat itself. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>cnt</strong> -- repeat count or <code class="docutils literal notranslate"><span class="pre">LV_ANIM_REPEAT_INFINITE</span></code> for infinite repetition. 0: to disable repetition. </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_anim_set_repeat_delayP9lv_anim_t8uint32_t">
<span id="_CPPv324lv_anim_set_repeat_delayP9lv_anim_t8uint32_t"></span><span id="_CPPv224lv_anim_set_repeat_delayP9lv_anim_t8uint32_t"></span><span id="lv_anim_set_repeat_delay__lv_anim_tP.uint32_t"></span><span class="target" id="lv__anim_8h_1a1c64e4ad6ec9fbb9a78688edc8d2c3fd"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_repeat_delay</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">delay</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_anim_set_repeat_delayP9lv_anim_t8uint32_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set a delay before repeating the animation. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>delay</strong> -- delay in milliseconds before repeating the animation. </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv423lv_anim_set_early_applyP9lv_anim_tb">
<span id="_CPPv323lv_anim_set_early_applyP9lv_anim_tb"></span><span id="_CPPv223lv_anim_set_early_applyP9lv_anim_tb"></span><span id="lv_anim_set_early_apply__lv_anim_tP.b"></span><span class="target" id="lv__anim_8h_1aed092efe358afd0826ca11f9a2681925"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_set_early_apply</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <span class="kt"><span class="pre">bool</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">en</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv423lv_anim_set_early_applyP9lv_anim_tb" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set a whether the animation's should be applied immediately or only when the delay expired. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p></li>
<li><p><strong>en</strong> -- true: apply the start value immediately in <code class="docutils literal notranslate"><span class="pre">lv_anim_start</span></code>; false: apply the start value only when <code class="docutils literal notranslate"><span class="pre">delay</span></code> ms is elapsed and the animations really starts </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv413lv_anim_startPK9lv_anim_t">
<span id="_CPPv313lv_anim_startPK9lv_anim_t"></span><span id="_CPPv213lv_anim_startPK9lv_anim_t"></span><span id="lv_anim_start__lv_anim_tCP"></span><span class="target" id="lv__anim_8h_1ad06de0b3c7bd796183793174ecb1e005"></span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_start</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv413lv_anim_startPK9lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Create an animation </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>a</strong> -- an initialized 'anim_t' variable. Not required after call. </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>pointer to the created animation (different from the <code class="docutils literal notranslate"><span class="pre">a</span></code> parameter) </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv417lv_anim_get_delayP9lv_anim_t">
<span id="_CPPv317lv_anim_get_delayP9lv_anim_t"></span><span id="_CPPv217lv_anim_get_delayP9lv_anim_t"></span><span id="lv_anim_get_delay__lv_anim_tP"></span><span class="target" id="lv__anim_8h_1a05bb2b3d866ca22a4b5cab054dc81365"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_get_delay</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv417lv_anim_get_delayP9lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get a delay before starting the animation </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>a</strong> -- pointer to an initialized <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> variable </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>delay before the animation in milliseconds </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv411lv_anim_delPv18lv_anim_exec_xcb_t">
<span id="_CPPv311lv_anim_delPv18lv_anim_exec_xcb_t"></span><span id="_CPPv211lv_anim_delPv18lv_anim_exec_xcb_t"></span><span id="lv_anim_del__voidP.lv_anim_exec_xcb_t"></span><span class="target" id="lv__anim_8h_1a9cb8109a832f6aac58e875fb2baa3755"></span><span class="kt"><span class="pre">bool</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_del</span></span></span><span class="sig-paren">(</span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">var</span></span>, <a class="reference internal" href="#_CPPv418lv_anim_exec_xcb_t" title="lv_anim_exec_xcb_t"><span class="n"><span class="pre">lv_anim_exec_xcb_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">exec_cb</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv411lv_anim_delPv18lv_anim_exec_xcb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Delete an animation of a variable with a given animator function </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>var</strong> -- pointer to variable </p></li>
<li><p><strong>exec_cb</strong> -- a function pointer which is animating 'var', or NULL to ignore it and delete all the animations of 'var </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>true: at least 1 animation is deleted, false: no animation is deleted </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv415lv_anim_del_allv">
<span id="_CPPv315lv_anim_del_allv"></span><span id="_CPPv215lv_anim_del_allv"></span><span id="lv_anim_del_all__void"></span><span class="target" id="lv__anim_8h_1a4d5c5f7461ab5982a3f673531139dcc7"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_del_all</span></span></span><span class="sig-paren">(</span><span class="kt"><span class="pre">void</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv415lv_anim_del_allv" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Delete all the animations animation </p>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv411lv_anim_getPv18lv_anim_exec_xcb_t">
<span id="_CPPv311lv_anim_getPv18lv_anim_exec_xcb_t"></span><span id="_CPPv211lv_anim_getPv18lv_anim_exec_xcb_t"></span><span id="lv_anim_get__voidP.lv_anim_exec_xcb_t"></span><span class="target" id="lv__anim_8h_1a0712f2b4b92f862b9e302b0b9b26611e"></span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_get</span></span></span><span class="sig-paren">(</span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">var</span></span>, <a class="reference internal" href="#_CPPv418lv_anim_exec_xcb_t" title="lv_anim_exec_xcb_t"><span class="n"><span class="pre">lv_anim_exec_xcb_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">exec_cb</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv411lv_anim_getPv18lv_anim_exec_xcb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the animation of a variable and its <code class="docutils literal notranslate"><span class="pre">exec_cb</span></code>. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>var</strong> -- pointer to variable </p></li>
<li><p><strong>exec_cb</strong> -- a function pointer which is animating 'var', or NULL to return first matching 'var' </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>pointer to the animation. </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv418lv_anim_custom_delP9lv_anim_t24lv_anim_custom_exec_cb_t">
<span id="_CPPv318lv_anim_custom_delP9lv_anim_t24lv_anim_custom_exec_cb_t"></span><span id="_CPPv218lv_anim_custom_delP9lv_anim_t24lv_anim_custom_exec_cb_t"></span><span id="lv_anim_custom_del__lv_anim_tP.lv_anim_custom_exec_cb_t"></span><span class="target" id="lv__anim_8h_1a02abe0023275d07e7a7dd102daf290bc"></span><span class="k"><span class="pre">static</span></span><span class="w"> </span><span class="k"><span class="pre">inline</span></span><span class="w"> </span><span class="kt"><span class="pre">bool</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_custom_del</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span>, <a class="reference internal" href="#_CPPv424lv_anim_custom_exec_cb_t" title="lv_anim_custom_exec_cb_t"><span class="n"><span class="pre">lv_anim_custom_exec_cb_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">exec_cb</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv418lv_anim_custom_delP9lv_anim_t24lv_anim_custom_exec_cb_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Delete an animation by getting the animated variable from <code class="docutils literal notranslate"><span class="pre">a</span></code>. Only animations with <code class="docutils literal notranslate"><span class="pre">exec_cb</span></code> will be deleted. This function exists because it's logical that all anim. functions receives an <code class="docutils literal notranslate"><span class="pre">lv_anim_t</span></code> as their first parameter. It's not practical in C but might make the API more consequent and makes easier to generate bindings. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>a</strong> -- pointer to an animation. </p></li>
<li><p><strong>exec_cb</strong> -- a function pointer which is animating 'var', or NULL to ignore it and delete all the animations of 'var </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>true: at least 1 animation is deleted, false: no animation is deleted </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv421lv_anim_count_runningv">
<span id="_CPPv321lv_anim_count_runningv"></span><span id="_CPPv221lv_anim_count_runningv"></span><span id="lv_anim_count_running__void"></span><span class="target" id="lv__anim_8h_1a4bb557452aa3ce128eb106e2f8208bc8"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_count_running</span></span></span><span class="sig-paren">(</span><span class="kt"><span class="pre">void</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv421lv_anim_count_runningv" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the number of currently running animations </p>
<dl class="field-list simple">
<dt class="field-odd">Returns</dt>
<dd class="field-odd"><p>the number of running animations </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv421lv_anim_speed_to_time8uint32_t7int32_t7int32_t">
<span id="_CPPv321lv_anim_speed_to_time8uint32_t7int32_t7int32_t"></span><span id="_CPPv221lv_anim_speed_to_time8uint32_t7int32_t7int32_t"></span><span id="lv_anim_speed_to_time__uint32_t.int32_t.int32_t"></span><span class="target" id="lv__anim_8h_1ab51f8f472c2bffe1f77080a1e40fc939"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_speed_to_time</span></span></span><span class="sig-paren">(</span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">speed</span></span>, <span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">start</span></span>, <span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">end</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv421lv_anim_speed_to_time8uint32_t7int32_t7int32_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Calculate the time of an animation with a given speed and the start and end values </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>speed</strong> -- speed of animation in unit/sec </p></li>
<li><p><strong>start</strong> -- start value of the animation </p></li>
<li><p><strong>end</strong> -- end value of the animation </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the required time [ms] for the animation with the given parameters </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv416lv_anim_refr_nowv">
<span id="_CPPv316lv_anim_refr_nowv"></span><span id="_CPPv216lv_anim_refr_nowv"></span><span id="lv_anim_refr_now__void"></span><span class="target" id="lv__anim_8h_1a25ae5912901decafee4d960ec3584d17"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_refr_now</span></span></span><span class="sig-paren">(</span><span class="kt"><span class="pre">void</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv416lv_anim_refr_nowv" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Manually refresh the state of the animations. Useful to make the animations running in a blocking process where <code class="docutils literal notranslate"><span class="pre">lv_timer_handler</span></code> can't run for a while. Shouldn't be used directly because it is called in <code class="docutils literal notranslate"><span class="pre">lv_refr_now()</span></code>. </p>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419lv_anim_path_linearPK9lv_anim_t">
<span id="_CPPv319lv_anim_path_linearPK9lv_anim_t"></span><span id="_CPPv219lv_anim_path_linearPK9lv_anim_t"></span><span id="lv_anim_path_linear__lv_anim_tCP"></span><span class="target" id="lv__anim_8h_1aa3e1114274e9085b8ba535420c873852"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_path_linear</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419lv_anim_path_linearPK9lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Calculate the current value of an animation applying linear characteristic </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>a</strong> -- pointer to an animation </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the current value to set </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv420lv_anim_path_ease_inPK9lv_anim_t">
<span id="_CPPv320lv_anim_path_ease_inPK9lv_anim_t"></span><span id="_CPPv220lv_anim_path_ease_inPK9lv_anim_t"></span><span id="lv_anim_path_ease_in__lv_anim_tCP"></span><span class="target" id="lv__anim_8h_1a95b403ca1374087687179c7967600198"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_path_ease_in</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv420lv_anim_path_ease_inPK9lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Calculate the current value of an animation slowing down the start phase </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>a</strong> -- pointer to an animation </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the current value to set </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv421lv_anim_path_ease_outPK9lv_anim_t">
<span id="_CPPv321lv_anim_path_ease_outPK9lv_anim_t"></span><span id="_CPPv221lv_anim_path_ease_outPK9lv_anim_t"></span><span id="lv_anim_path_ease_out__lv_anim_tCP"></span><span class="target" id="lv__anim_8h_1a6a96dd88618e4e7912fb1096036c6458"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_path_ease_out</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv421lv_anim_path_ease_outPK9lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Calculate the current value of an animation slowing down the end phase </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>a</strong> -- pointer to an animation </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the current value to set </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_anim_path_ease_in_outPK9lv_anim_t">
<span id="_CPPv324lv_anim_path_ease_in_outPK9lv_anim_t"></span><span id="_CPPv224lv_anim_path_ease_in_outPK9lv_anim_t"></span><span id="lv_anim_path_ease_in_out__lv_anim_tCP"></span><span class="target" id="lv__anim_8h_1aa276989eca9f5bd11b2dc16d7e29c6d7"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_path_ease_in_out</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_anim_path_ease_in_outPK9lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Calculate the current value of an animation applying an &quot;S&quot; characteristic (cosine) </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>a</strong> -- pointer to an animation </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the current value to set </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv422lv_anim_path_overshootPK9lv_anim_t">
<span id="_CPPv322lv_anim_path_overshootPK9lv_anim_t"></span><span id="_CPPv222lv_anim_path_overshootPK9lv_anim_t"></span><span id="lv_anim_path_overshoot__lv_anim_tCP"></span><span class="target" id="lv__anim_8h_1ac110a8857df9884ed29e79cf57389cca"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_path_overshoot</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv422lv_anim_path_overshootPK9lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Calculate the current value of an animation with overshoot at the end </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>a</strong> -- pointer to an animation </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the current value to set </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419lv_anim_path_bouncePK9lv_anim_t">
<span id="_CPPv319lv_anim_path_bouncePK9lv_anim_t"></span><span id="_CPPv219lv_anim_path_bouncePK9lv_anim_t"></span><span id="lv_anim_path_bounce__lv_anim_tCP"></span><span class="target" id="lv__anim_8h_1abba54a9c3fdfefb0edab9be3ca28596e"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_path_bounce</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419lv_anim_path_bouncePK9lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Calculate the current value of an animation with 3 bounces </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>a</strong> -- pointer to an animation </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the current value to set </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv417lv_anim_path_stepPK9lv_anim_t">
<span id="_CPPv317lv_anim_path_stepPK9lv_anim_t"></span><span id="_CPPv217lv_anim_path_stepPK9lv_anim_t"></span><span id="lv_anim_path_step__lv_anim_tCP"></span><span class="target" id="lv__anim_8h_1a448fcaf1475935df3dfc38acb245497d"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_anim_path_step</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv49lv_anim_t" title="lv_anim_t"><span class="n"><span class="pre">lv_anim_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">a</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv417lv_anim_path_stepPK9lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Calculate the current value of an animation applying step characteristic. (Set end value on the end of the animation) </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>a</strong> -- pointer to an animation </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the current value to set </p>
</dd>
</dl>
</dd></dl>

</div>
<dl class="cpp struct">
<dt class="sig sig-object cpp" id="_CPPv410_lv_anim_t">
<span id="_CPPv310_lv_anim_t"></span><span id="_CPPv210_lv_anim_t"></span><span id="_lv_anim_t"></span><span class="target" id="struct__lv__anim__t"></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">_lv_anim_t</span></span></span><a class="headerlink" href="#_CPPv410_lv_anim_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><em>#include &lt;lv_anim.h&gt;</em><p>Describes an animation </p>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-public-members">Public Members</p>
<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t3varE">
<span id="_CPPv3N10_lv_anim_t3varE"></span><span id="_CPPv2N10_lv_anim_t3varE"></span><span id="_lv_anim_t::var__voidP"></span><span class="target" id="struct__lv__anim__t_1a4b0b0f57a3d67af5bdaaa79ec0f96773"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">var</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t3varE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Variable to animate </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t7exec_cbE">
<span id="_CPPv3N10_lv_anim_t7exec_cbE"></span><span id="_CPPv2N10_lv_anim_t7exec_cbE"></span><span id="_lv_anim_t::exec_cb__lv_anim_exec_xcb_t"></span><span class="target" id="struct__lv__anim__t_1afed693cd4a40ab3981ca12858bacd794"></span><a class="reference internal" href="#_CPPv418lv_anim_exec_xcb_t" title="lv_anim_exec_xcb_t"><span class="n"><span class="pre">lv_anim_exec_xcb_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">exec_cb</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t7exec_cbE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Function to execute to animate </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t8start_cbE">
<span id="_CPPv3N10_lv_anim_t8start_cbE"></span><span id="_CPPv2N10_lv_anim_t8start_cbE"></span><span id="_lv_anim_t::start_cb__lv_anim_start_cb_t"></span><span class="target" id="struct__lv__anim__t_1a1794171ac312eff1b40c29b91bbd484f"></span><a class="reference internal" href="#_CPPv418lv_anim_start_cb_t" title="lv_anim_start_cb_t"><span class="n"><span class="pre">lv_anim_start_cb_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">start_cb</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t8start_cbE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Call it when the animation is starts (considering <code class="docutils literal notranslate"><span class="pre">delay</span></code>) </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t8ready_cbE">
<span id="_CPPv3N10_lv_anim_t8ready_cbE"></span><span id="_CPPv2N10_lv_anim_t8ready_cbE"></span><span id="_lv_anim_t::ready_cb__lv_anim_ready_cb_t"></span><span class="target" id="struct__lv__anim__t_1af9b097f07ff1900f4e8fe7fee82725ae"></span><a class="reference internal" href="#_CPPv418lv_anim_ready_cb_t" title="lv_anim_ready_cb_t"><span class="n"><span class="pre">lv_anim_ready_cb_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">ready_cb</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t8ready_cbE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Call it when the animation is ready </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t12get_value_cbE">
<span id="_CPPv3N10_lv_anim_t12get_value_cbE"></span><span id="_CPPv2N10_lv_anim_t12get_value_cbE"></span><span id="_lv_anim_t::get_value_cb__lv_anim_get_value_cb_t"></span><span class="target" id="struct__lv__anim__t_1ac1c14ba7023a49323be3a4c6c9a312af"></span><a class="reference internal" href="#_CPPv422lv_anim_get_value_cb_t" title="lv_anim_get_value_cb_t"><span class="n"><span class="pre">lv_anim_get_value_cb_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">get_value_cb</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t12get_value_cbE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the current value in relative mode </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t9user_dataE">
<span id="_CPPv3N10_lv_anim_t9user_dataE"></span><span id="_CPPv2N10_lv_anim_t9user_dataE"></span><span id="_lv_anim_t::user_data__voidP"></span><span class="target" id="struct__lv__anim__t_1aa8ccf84c0d4076c8d4bcee939d3f8b38"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">user_data</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t9user_dataE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Custom user data </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t7path_cbE">
<span id="_CPPv3N10_lv_anim_t7path_cbE"></span><span id="_CPPv2N10_lv_anim_t7path_cbE"></span><span id="_lv_anim_t::path_cb__lv_anim_path_cb_t"></span><span class="target" id="struct__lv__anim__t_1ac0dd5118407879e65def4439442ba77f"></span><a class="reference internal" href="#_CPPv417lv_anim_path_cb_t" title="lv_anim_path_cb_t"><span class="n"><span class="pre">lv_anim_path_cb_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">path_cb</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t7path_cbE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Describe the path (curve) of animations </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t11start_valueE">
<span id="_CPPv3N10_lv_anim_t11start_valueE"></span><span id="_CPPv2N10_lv_anim_t11start_valueE"></span><span id="_lv_anim_t::start_value__int32_t"></span><span class="target" id="struct__lv__anim__t_1affb2afd81ed1d25d5aac711cb7917e8d"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">start_value</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t11start_valueE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Start value </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t13current_valueE">
<span id="_CPPv3N10_lv_anim_t13current_valueE"></span><span id="_CPPv2N10_lv_anim_t13current_valueE"></span><span id="_lv_anim_t::current_value__int32_t"></span><span class="target" id="struct__lv__anim__t_1aa3979c3cd067cd7f2f131371ec970744"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">current_value</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t13current_valueE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Current value </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t9end_valueE">
<span id="_CPPv3N10_lv_anim_t9end_valueE"></span><span id="_CPPv2N10_lv_anim_t9end_valueE"></span><span id="_lv_anim_t::end_value__int32_t"></span><span class="target" id="struct__lv__anim__t_1afb6eeccf9ed0a6fe13f64b46bcd35779"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">end_value</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t9end_valueE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>End value </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t4timeE">
<span id="_CPPv3N10_lv_anim_t4timeE"></span><span id="_CPPv2N10_lv_anim_t4timeE"></span><span id="_lv_anim_t::time__int32_t"></span><span class="target" id="struct__lv__anim__t_1a42e92594625e6264d999fd42f4f86dd2"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">time</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t4timeE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Animation time in ms </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t8act_timeE">
<span id="_CPPv3N10_lv_anim_t8act_timeE"></span><span id="_CPPv2N10_lv_anim_t8act_timeE"></span><span id="_lv_anim_t::act_time__int32_t"></span><span class="target" id="struct__lv__anim__t_1aefd061d401c45d45b0da2233e31c8480"></span><span class="n"><span class="pre">int32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">act_time</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t8act_timeE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Current time in animation. Set to negative to make delay. </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t14playback_delayE">
<span id="_CPPv3N10_lv_anim_t14playback_delayE"></span><span id="_CPPv2N10_lv_anim_t14playback_delayE"></span><span id="_lv_anim_t::playback_delay__uint32_t"></span><span class="target" id="struct__lv__anim__t_1acd9eb914c80c72f6094ad053308892f4"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">playback_delay</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t14playback_delayE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Wait before play back </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t13playback_timeE">
<span id="_CPPv3N10_lv_anim_t13playback_timeE"></span><span id="_CPPv2N10_lv_anim_t13playback_timeE"></span><span id="_lv_anim_t::playback_time__uint32_t"></span><span class="target" id="struct__lv__anim__t_1ae78637ba3313cc15774fdad2ac05af21"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">playback_time</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t13playback_timeE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Duration of playback animation </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t12repeat_delayE">
<span id="_CPPv3N10_lv_anim_t12repeat_delayE"></span><span id="_CPPv2N10_lv_anim_t12repeat_delayE"></span><span id="_lv_anim_t::repeat_delay__uint32_t"></span><span class="target" id="struct__lv__anim__t_1a272f02263784d7ecc7804a9064eb1a66"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">repeat_delay</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t12repeat_delayE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Wait before repeat </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t10repeat_cntE">
<span id="_CPPv3N10_lv_anim_t10repeat_cntE"></span><span id="_CPPv2N10_lv_anim_t10repeat_cntE"></span><span id="_lv_anim_t::repeat_cnt__uint16_t"></span><span class="target" id="struct__lv__anim__t_1a9e310c35a279cf668196c2c7fe918975"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">repeat_cnt</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t10repeat_cntE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Repeat count for the animation </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t11early_applyE">
<span id="_CPPv3N10_lv_anim_t11early_applyE"></span><span id="_CPPv2N10_lv_anim_t11early_applyE"></span><span id="_lv_anim_t::early_apply__uint8_t"></span><span class="target" id="struct__lv__anim__t_1a38e52d59bffe3a2d8350b4ebec57e530"></span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">early_apply</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t11early_applyE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>1: Apply start value immediately even is there is <code class="docutils literal notranslate"><span class="pre">delay</span></code> </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t12playback_nowE">
<span id="_CPPv3N10_lv_anim_t12playback_nowE"></span><span id="_CPPv2N10_lv_anim_t12playback_nowE"></span><span id="_lv_anim_t::playback_now__uint8_t"></span><span class="target" id="struct__lv__anim__t_1aca604b95ce9cc0ade0a3e6cf35e7b073"></span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">playback_now</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t12playback_nowE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Play back is in progress </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t9run_roundE">
<span id="_CPPv3N10_lv_anim_t9run_roundE"></span><span id="_CPPv2N10_lv_anim_t9run_roundE"></span><span id="_lv_anim_t::run_round__uint8_t"></span><span class="target" id="struct__lv__anim__t_1a3ed1178fc3071ed6f544e64b8a0b9572"></span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">run_round</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t9run_roundE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Indicates the animation has run in this round </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t15start_cb_calledE">
<span id="_CPPv3N10_lv_anim_t15start_cb_calledE"></span><span id="_CPPv2N10_lv_anim_t15start_cb_calledE"></span><span id="_lv_anim_t::start_cb_called__uint8_t"></span><span class="target" id="struct__lv__anim__t_1a293f21a4b59ec38b9514000ef079d119"></span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">start_cb_called</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t15start_cb_calledE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Indicates that the <code class="docutils literal notranslate"><span class="pre">start_cb</span></code> was already called </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10_lv_anim_t9time_origE">
<span id="_CPPv3N10_lv_anim_t9time_origE"></span><span id="_CPPv2N10_lv_anim_t9time_origE"></span><span id="_lv_anim_t::time_orig__uint32_t"></span><span class="target" id="struct__lv__anim__t_1ab46694d3dee8628945a42f461d52bc89"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">time_orig</span></span></span><a class="headerlink" href="#_CPPv4N10_lv_anim_t9time_origE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</div>
</dd></dl>

</div>
</div>


           </div>
           
          </div>
          <footer>
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
        <a href="timer.html" class="btn btn-neutral float-right" title="Timers" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
        <a href="file-system.html" class="btn btn-neutral float-left" title="File system" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    </div>

  <hr/>

  <div role="contentinfo">
    <p>
        &#169; Copyright 2020, LVGL LLC.
      <span class="lastupdated">
        Last updated on Jan 10, 2022.
      </span>

    </p>
  </div>
    
    
    
    Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
    
    <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    
    provided by <a href="https://readthedocs.org">Read the Docs</a>. 

</footer>
        </div>
      </div>

    </section>

  </div>
  

  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script>

  
  
    
  

<style>
  .wy-side-nav-search > div[role="search"] {
    color: black;
  }
</style>
 <script type="text/javascript">
    $(document).ready(function() {
        $(".toggle > *").hide();
        $(".toggle .header").show();
        $(".toggle .header").click(function() {
            $(this).parent().children().not(".header").toggle(400);
            $(this).parent().children(".header").toggleClass("open");
        })
    });
</script>

<script type="text/javascript">
function add_version_selector()
{
    return fetch("https://raw.githubusercontent.com/lvgl/docs_compiled/gh-pages/versionlist.txt")
        .then(res => res.text())
        .then(text => {
            const versions = text.split("\n").filter(version => version.trim().length > 0);
            let p = document.getElementById("rtd-search-form").parentElement;
            p.innerHTML = `
            <select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
            ${versions.map(version => {
                const versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
                return `<option value="${version}">${versionName}</option>`;
            })}
            </select>` + p.innerHTML;
        });
}

function ver_sel()
{
  var x = document.getElementById("versions").value;
  window.location.href = window.location.protocol + "//" + window.location.host + "/" + x + "/";
}

document.addEventListener('DOMContentLoaded', (event) => {
    add_version_selector().then(() => {
        var value = window.location.pathname.split('/')[1];
        document.getElementById("versions").value = value;
    });
    
})
</script>


</body>
</html>